<!-- 底部悬浮按钮，添加到主屏幕 -->
<template>
  <div class="wapAddScreen">
    <div class="AddToHomeScreen" v-if="showButton" @click="showAddToHomeScreen">
      <img src="@/assets/images/ic_logo_add@2x.png" />
      <span class="btnName">Add To HomeScreen</span>
    </div>
  </div>
  <!-- iOS引导弹窗 -->
  <van-popup v-model:show="showIOSGuide" position="center" round
    :style="{ width: '90%', padding: '20px', textAlign: 'center' }">
    <h2 class="guide-title">Add to Home Screen Guide</h2>

    <div class="ios-steps">
      <div class="step">
        <div class="step-number">1</div>
        <p>Click the "Share" button at the bottom of the browser</p>
      </div>

      <div class="step">
        <div class="step-number">2</div>
        <p>Select "Add to Home Screen" from the menu</p>
      </div>

      <div class="step">
        <div class="step-number">3</div>
        <p>Click the "Add" button in the top right corner</p>
      </div>
    </div>

    <p class="ios-hint">On iOS devices, you need to manually add the app to the home screen through the browser menu</p>

    <van-button type="primary" block round class="close-btn" @click="showIOSGuide = false">
      Got it
    </van-button>
  </van-popup>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { showToast } from "vant";

const showButton = ref(false);

const showIOSGuide = ref(false);
const deferredPrompt = ref(null);
const isIOS = ref(false);
const isStandalone = ref(false);

// 检测设备类型
const checkDevice = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  isIOS.value = /iphone|ipad|ipod/.test(userAgent);

  // 检查是否已作为PWA运行
  isStandalone.value = window.matchMedia("(display-mode: standalone)").matches;
};

// 显示添加到主屏幕提示
const showAddToHomeScreen = () => {
  if (isStandalone.value) {
    showToast("The app is already on your home screen!");
    return;
  }

  if (isIOS.value) {
    showIOSGuide.value = true;
  } else if (deferredPrompt.value) {
    deferredPrompt.value.prompt();
    deferredPrompt.value.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === "accepted") {
        console.log("用户接受了添加到主屏幕提示");
      }
      deferredPrompt.value = null;
    });
  } else {
    showToast("Your browser does not support the add-to-home-screen feature.");
  }
};

// 滚动事件处理
const handleScroll = () => {
  // 计算当前滚动位置
  const scrollPosition = window.innerHeight + window.scrollY;
  // 获取页面总高度
  const pageHeight = document.documentElement.scrollHeight;
  // 距离底部的阈值
  const threshold = 150;
  // 当接近底部时隐藏按钮
  showButton.value = pageHeight - scrollPosition > threshold;
};

// 组件挂载时设置事件监听
onMounted(() => {
  window.addEventListener("scroll", handleScroll);

  checkDevice();
  // 监听PWA安装提示事件
  window.addEventListener("beforeinstallprompt", (e) => {
    e.preventDefault();
    deferredPrompt.value = e;
  });
  // 检测是否独立应用模式
  window.matchMedia("(display-mode: standalone)").addEventListener("change", (e) => {
    isStandalone.value = e.matches;
  });
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style scoped lang="less">
.guide-title {
  text-align: center;
  color: #1989fa;
  margin-bottom: 20px;
}

.ios-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-number {
  width: 40px;
  height: 40px;
  background: #1989fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: white;
  font-weight: bold;
  font-size: 18px;
}

.ios-hint {
  margin: 15px 0;
  padding: 10px;
  background: #f0f7ff;
  border-radius: 8px;
  color: #666;
  font-size: 14px;
}

.close-btn {
  margin-top: 10px;
}

.AddToHomeScreen {
  position: fixed;
  bottom: 5px;
  left: 50%;
  z-index: 100;
  transform: translate(-50%);
  text-align: center;
  box-sizing: border-box;
  width: 239px;
  height: 56px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  img {
    width: 24px;
  }

  .btnName {
    font-weight: 700;
    font-family: Inter, Inter;
    font-size: 16px;
    color: #ffffff;
    margin-left: 8px;
  }
}
</style>
